<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">在线/离线接入终端数</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_accessTerminal"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "accessTerminal",
  data() {
    return {
      timer: null,
      option: null,
      tableData: [],
      xAxisData: [],
      yData: [],
      sumCount: ''
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/queryByAccessType';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data;
          // 02 有线离线用户，01 有线在线用户, 12 无线离线用户，11 无线在线用户。
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_accessTerminal'));
      let showed = this.tableData && this.tableData.length ? false : true;

      let data = [];
      for(let i=0;i<this.tableData.length;i++){
        let obj1 = {};
        // 02 有线离线用户，01 有线在线用户, 12 无线离线用户，11 无线在线用户。
        if(this.tableData[i].type == '1'){
          obj1.value = this.tableData[i].count;
          obj1.name = '在线终端数'+ '--'+this.tableData[i].count+'/个';
        }else if(this.tableData[i].type == '2'){
          obj1.value = this.tableData[i].count;
          obj1.name = '离线终端数'+ '--'+this.tableData[i].count+'/个';
        }
        
        // else if(this.tableData[i].type === '12'){
        //   obj1.value = this.tableData[i].count;
        //   obj1.name = '无线离线终端数'+ '--'+this.tableData[i].count+'/个';
        // }else if(this.tableData[i].type === '11'){
        //   obj1.value = this.tableData[i].count;
        //   obj1.name = '无线在线终端数'+ '--'+this.tableData[i].count+'/个';
        // }
        data.push(obj1);
      }
      this.option = {
        title: {
          show: showed, // 是否显示title
          text: '暂无数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 400
          },
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   top: '5%',
        //   left: 'center',
        //   textStyle: { //图例文字的样式
        //     color: '#fff',
        //     fontSize: 14
        //   },
        // },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 2,
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal:{
                color:function(params) {
                //自定义颜色
                var colorList = [          
                  'rgb(160, 167, 230)', 'rgb(237, 175, 218)','rgb(78, 241, 246)','#7eff9a'
                ];
                  return colorList[params.dataIndex]
                }
              }
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.sn-container {
  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>
